<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom增删改练习</title>
</head>
<style>
    body {
        width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    button {
        width: 300px;
        margin-bottom: 10px;
    }

    #btnList {
        float: left;
    }

    #total {
        width: 450px;
        float: left;
    }

    ul {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
    }

    .inner li {
        border-style: solid;
        border-width: 1px;
        padding: 5px;
        margin: 5px;
        background-color: #99ff99;
        float: left;
    }

    .inner {
        width: 400px;
        border-style: solid;
        border-width: 1px;
        margin-bottom: 10px;
        padding: 10px;
        float: left;
    }
</style>

<body>
    <div id="total">
        <div class="inner">
            <p>
                你喜欢哪个城市?
            </p>

            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>东京</li>
                <li>首尔</li>
            </ul>

        </div>
    </div>
    <div id="btnList">
        <div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
        <div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
        <div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
        <div><button id="btn04">删除#bj节点</button></div>
        <div><button id="btn05">读取#city内的HTML代码</button></div>
        <div><button id="btn06">设置#bj内的HTML代码</button></div>
        <div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
    </div>
</body>
<script>
    window.onload = function () {
        
        // 创建一个"广州"节点,添加到#city下
        myClick("btn01",function () {
            //创建广州节点 <li>广州</li>
            var li = document.createElement('li')
            // 创建广州文本节点
            var gzText = document.createTextNode('广州')
            // appendChild()表示向节点添加最后一个子节点
            li.appendChild(gzText)
            // console.log(li);
            var city = document.getElementById('city')
            // 将广州添加到city下
            city.appendChild(li)


        }) 
       
        // 将"广州"节点插入到#bj前面
        myClick('btn02',function () {
            var li = document.createElement('li')
            var gz = document.createTextNode('广州')
            li.appendChild(gz)

            var bj = document.getElementById('bj')
            var city = document.getElementById('city')

            /*
             * insertBefore()
             * 	- 可以在指定的子节点前插入新的子节点
             *  - 语法：
             * 		父节点.insertBefore(新节点,旧节点);
             */
            city.insertBefore(li, bj)

        }) 
      
        // 使用"广州"节点替换#bj节点
       myClick('btn03',function () {
            var li = document.createElement('li')
            var gz = document.createTextNode('广州')
            li.appendChild(gz)
            var bj = document.getElementById('bj')
            var city = document.getElementById('city')
            city.replaceChild(li, bj)


        }) 
       
        // 删除#bj节点
       myClick('btn04',function () {
            var city = document.getElementById('city')
            var bj = document.getElementById('bj')
            city.removeChild(bj)
        }) 
        // 读取#city内的HTML代码
       
        myClick("btn05",function () {
            var city = document.getElementById('city')
            alert(city.innerHTML)
        }) 
        // 设置#bj内的HTML代码
        
        myClick('btn06',function () {
            var bj = document.getElementById('bj')
            bj.innerHTML = "南宁"
        }) 
        // 创建一个"广州"节点,添加到#city下
        
        myClick('btn07',function(){
            var li = document.createElement('li')
            li.innerHTML = "广州"
            var city = document.getElementById('city')
            city.appendChild(li)
            
        }) 


    }

    function myClick(idStr,fun){
        var btn = document.getElementById(idStr)
        btn.onclick = fun
    }

</script>

</html>